import QtQuick

Rectangle {
    id: root
    width: 300; height: 300

    Text {
        // (1) identifier
        id: thisLabel

        // (2) set x- and y-position
        x: 24; y: 16

        // (3) bind height to 2 * width
        height: 2 * width
        Rectangle {
            anchors.fill: parent
            color: 'yellow'
            z:parent.z - 1
        }

        // (4) custom property
        property int times: 24

        // (5) property alias
        property alias anotherTimes: thisLabel.times

        // (6) set text appended by value
        text: "thisLable " + anotherTimes

        // (7) font is a grouped property
        font.family: "Ubuntu"
        font.pixelSize: 24

        // (8) KeyNavigation is an attached property
        KeyNavigation.tab: thatLabel

        // (9) signal handler for property changes
        onHeightChanged: console.log('height:', height)

        // focus is need to receive key events
        focus: false

        // change color based on focus value
        color: focus ? "red" : "black"
    }

    Text {
        id: thatLabel
        color: "black"
        x:24;y:124

        // custom counter property for space process
        property int spaceProcess: 0

        // 持续性关联
        text: "thatLabel" + spaceProcess + "times"

        // (1) 当检测到 text 文本发生变换, 则控制台输出变化后的内容
        onTextChanged: function(text) { console.log("text change to :", text);}

        // 需要聚焦才能检测按键事件
        focus: true

        // (2) 检测到空格键按下
        Keys.onSpacePressed: {increment();}

        // EscapePressed 按下, 解除 text 的绑定
        Keys.onEscapePressed: {thatLabel.text = ''}

        // (3) 定义 JS 函数
        function increment() {
            spaceProcess = spaceProcess + 1;
        }

        // 按下 tab 键盘, 焦点转换到 thisLabel
        KeyNavigation.tab: thisLabel
    }
}


